<template>
    <div id="root">
        <div id="four">
            <div class="four-content">
                <span id="four-span1">现在就想开启学习掌握电商网店技能之路吗？</span>
                <span id="four-span2">立即选择学习课程</span>
            </div>
        </div>
        <div id="video-four">
            <div id="bg">
                <div id="bgColor">
                    <div class="bf"></div>
                    <p class="bg-p1">欢迎免费试听体验我们的课程！</p>
                    <p class="bg-p2">目前名淘电商在线学习平台有两种授课模式：直播授课及视频授课；同时视频课程有两种展现形式：场景授课视频及屏录视频，欢迎您在线试听体验。</p>
                </div>
            </div>
            <div id="number">
                <div id='math'>
                    <div
                        v-for="(n,i) in nums"
                        :key="i"
                        class="region"
                    >
                        <img :src="n.path" alt="" class="img">
                        <p class="math-p">68249</p>
                        <span class="math-span">{{n.title}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
          angle:true,
          offset:0,
          pageX:0,
          pageY:0,
          position:'',
          nums:[
                {
                    path:'/imgs/home/icon01.png',
                    title:'注册用户'
                },
                {
                    path:'/imgs/home/icon02.png',
                    title:'付费用户'
                },
                {
                    path:'/imgs/home/icon03.png',
                    title:'视频课程'
                },
                {
                    path:'/imgs/home/icon04.png',
                    title:'直播课堂'
                },
          ],
      };
    },
    methods:{

    }
  }

</script>
<style scoped>
#root{
    color: #ffffff;
}
#four{
    height:280px;
    background:rgba(2,178,251,1);
    line-height: 280px;
}
.four-content{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}
#four-span1{
    font-size:42px;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(255,255,255,1);
    vertical-align: middle;
}
#four-span2{
    padding: 20px 50px;
    border:2px solid rgba(255,255,255,1);
    vertical-align: middle;
    margin-left: 126px;
}
#video-four{
    height: 798px;
}
#bg{
    height: 450px;
    background-image: url(/imgs/home/bj04.png);
    background-size: 100% 100%;
    /* background-attachment: fixed; */
    /* background-position: 0 20px; */
    background-repeat: no-repeat;
}
#bgColor{
    height: 450px;
    background-color: rgba(0,0,0,0.2);
    margin: 0 auto;
    padding: 95px;
    text-align: center;
}
.bf{
    width: 72px;
    height: 72px;
    background-image: url(/imgs/home/bf_01.png);
    background-size: 100% 100%;
    margin: 0 auto;
    transition: all 1s;
}
.bf:hover {
    background-image: url(/imgs/home/bf_02.png);
}
.bg-p1{
    width: 620px;
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
    margin: 0 auto;
    margin-top: 53px;
    margin-bottom: 35px;
}
.bg-p2{
    width: 794px;
    font-size: 21px;
    line-height: 36px;
    margin: 0 auto;
}
#number{
    height: 348px;
    background-color: black;
}
#math{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.region{
    width: 20%;
    text-align: center;
}
.img{
    width: 40px;
    height: 40px;
}
.math-p{
    font-size: 35px;
    font-weight: bold;
    margin: 10px 0;
}
.math-span{
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}
</style>